<template>
	<div>
		<!-- 快递网点选择器 -->
		<el-dialog v-model="outletDialog" title="请选择快递网点" @closed="cancelOutlet">
			<template #header>
				<div style="margin-top: 40px">
					<span>请选择</span>
					<div class="dialog-footer" style="float: right">
						<el-button type="primary" @click="confirmOutlet">确认</el-button>
					</div>
				</div>
			</template>
			<el-table ref="outletTableRef" style="width: 100%" :show-header="true" :data="outletData" @current-change="handleOutletChange" @select="selectOutlet" highlight-current-row>
				<el-table-column type="selection" width="55" />
				<el-table-column property="name" label="网点名称"/>
				<el-table-column property="phone" label="联系电话"/>
				<el-table-column property="province" label="省份"/>
				<el-table-column property="city" label="城市"/>
				<el-table-column property="town" label="县区"/>
				<el-table-column property="detailAddress" label="详细地址"/>
			</el-table>
			<div class="pagination">
				<el-pagination
						background
						layout="total, prev, pager, next"
						:current-page="outletQuery.pageNum"
						:page-size="outletQuery.pageSize"
						:page-count="outletQuery.page"
						:total="outletQuery.count"
						@current-change="handlePageChange"/>
			</div>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="basetable">
import { ref, reactive, defineEmits } from 'vue';
import { ElMessage } from 'element-plus';
import { getOutletListApi, getWebUserListApi } from '../api/index';

// 定义派发事件
const emit = defineEmits(['selectedOutlet']);
const outletDialog = ref(false);
const outletQuery = reactive({
	pageNum: 1,
	pageSize: 10,
	page: 1,
	total: 0,
	name: '',
	province: '',
	city: '',
	town: ''
});
const outletData = ref([]);
const outletTableRef = ref();
const selectedRow = ref();

// 获取表格数据
const getData = async () => {
	const result = await getOutletListApi(outletQuery);
	if (result) {
		outletData.value = result.data.content;
		outletQuery.total = result.data.count;
	}
};
getData();

// 查询操作
const handleSearch = () => {
	outletQuery.pageNum = 1;
	getData();
};
// 分页导航
const handlePageChange = (val: number) => {
	outletQuery.pageNum = val;
	getData();
};

const selectedOutlet = (param: any) => {
};

// 网点单选切换
const handleOutletChange = (currentRow: any, unselectedRow: any) => {
	outletTableRef.value.toggleRowSelection(currentRow, true);
	outletTableRef.value.toggleRowSelection(unselectedRow, false);
	selectedRow.value = currentRow;
};
// 网点多选切换
const selectOutlet = (selection: any, row: any) => {
	if (selection.length > 1) {
		let delRow = selection.shift();
		// 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）
		outletTableRef.value.toggleRowSelection(delRow, false);
		outletTableRef.value.setCurrentRow(row);
		selectedRow.value = row;
	}
};
// 网点确认
const confirmOutlet = () => {
	if (!selectedRow.value) {
		ElMessage.warning('请选择...');
		return;
	}
	// 调用父组件的selectedOutlet方法
	emit('selectedOutlet', selectedRow.value);

	// 清空数据
	cancelOutlet();
};


// 取消网点选择
const cancelOutlet = () => {
	outletDialog.value = false;
	selectedRow.value = undefined;
	outletTableRef.value.clearSelection();
	outletTableRef.value.setCurrentRow();
};

// 切换弹出框
const changeShow = (status: boolean) => {
	console.log("changeShow", status);
	outletDialog.value = status;
};


defineExpose({
	changeShow
})
</script>

<style scoped>
.handle-box {
	margin-bottom: 20px;
}

.handle-select {
	width: 120px;
}

.handle-input {
	width: 300px;
}
.table {
	width: 100%;
	font-size: 14px;
}
.red {
	color: #ff0000;
}
.mr10 {
	margin-right: 10px;
}
.table-td-thumb {
	display: block;
	margin: auto;
	width: 40px;
	height: 40px;
}
.el-form-item {
	font-size: 16px;
	font-weight: 700;
	color: var(--el-text-color-primary);
}

::v-deep(.el-table__header-wrapper .el-checkbox) {
	display:none
}
</style>
